<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" href="css/jquery.ui.all.css">
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script src="js/ui/jquery.ui.core.js"></script>
	<script src="js/ui/jquery.ui.widget.js"></script>
	<script src="js/ui/jquery.ui.mouse.js"></script>
	<script src="js/ui/jquery.ui.draggable.js"></script>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
         <link rel="stylesheet" href="css/estilo-general.css" type="text/css" />
        <script type="text/javascript" src="./js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="./js/script.js"></script>
        <script type="text/javascript" src="./js/infobubble.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="./js/oms.min.js"></script>
        <script type="text/javascript" src="./js/map.js"></script>
        <script type="text/javascript" src="./js/clima.js"></script>
        <script type="text/javascript" src="./js/toggleMarkers.js"></script>
        <script type="text/javascript" src="./js/barraNegra.js"></script>
        <script type="text/javascript" src="./js/calcRuta.js"></script>
        <script type="text/javascript" src="./js/buscador.js"></script>
        <script type="text/javascript" src="./js/menu.js"></script>
        <script type="text/javascript" src="./js/jQueryf.js"></script>
         <script type="text/javascript" src="js/ventana-modal.js"></script>
	<script>
	$(function() {
		$( "#light" ).draggable({ handle:'.header'});
	});
	</script>
    </head>
    <body onload="iniciar();mostrarVentanaModal();">
        <div id="logo"><img alt="" src="./img/logo.png" style="border-radius:10px;"></div>
        <div id="abrir">
            <a href="#" onclick="javascript:mostrardiv()">Modo mapa <img src="./img/close.png"/></a>
        </div>
        <!--barra negra del encabezados-->
        <div id="barranegra">
            <div id="botones">
                <a href="#" style="color: white;" onclick="javascript:tipoMapa('calles')">Map</a> |
                <a href="#" style="color: white;" onclick="javascript:tipoMapa('satelite')">Satellite</a> |
                <a href="#" style="color: white;" onclick="javascript:tipoMapa('terrain')">Terrain</a>
            </div>
            <div id="cerrarmapa">
                <a href="#" onclick="javascript:cerrar()"  style="color: white;">Terminar modo mapa <img src="./img/close.png"/></a>
            </div>

        </div>
        <!-- div donde va el mapa-->
        <div id="map">

            <div class="tabs" id="tabss">
                <!-- tabs -->
                <ul class="tabNavigation">
                    <li><a href="#message">Mostrar</a></li>
                    <li><a href="#shareFile">Rutas</a></li>
                    <li><a href="#arrange">Buscar</a></li>
                </ul>

                <!-- tab containers -->
                <div id="message">
                    <div id="clima">
                        <a href="#" onclick="javascript:toggleMarkers('Clima', 'check3')"><img style="display: none" name="check3" id="check3" src="./img/chk_on.png">&nbsp;&nbsp;&nbsp;&nbsp;<img src="./img/climaP.png"> <b> El tiempo actual</b></a>
                    </div>
                    <div id="formulario">
                        <form id="form">

                        </form>
                    </div>


                </div>
                <div id="shareFile">
           <!--tab de la ruta-->
            <div id="ruta">
                <ul>
                    <li><b>Mostrar Ruta: </b></li>
                Ej: "Madrid 325, Godoy Cruz"<br/><hr/>
                <li><span>Inicio:
                    <input type="text" id="start" onchange="javascript:calcRoute()"/></span></li>
                <li><span>Fin:&nbsp;&nbsp;&nbsp;
                    <input type="text" id="end" onchange="javascript:calcRoute()"/></span></li>
                    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ir&nbsp;<select id="tipoViaje" name="tipoViaje" onchange="javascript:calcRoute()">
                        <option value="DRIVING">Conduciendo</option>
                        <option value="WALKING">Caminando</option>
                    </select></span></li><br/>
                    <li><span id="total"></span></li>
                <li> <input type="button" value="Limpiar Ruta" onclick="javascript:borrarRuta()"> <input type="button" value="Guardar Ruta" onclick="javascript:guardarRuta()"></li>
                </ul>
                
            </div>
                </div>
                <div id="arrange">

                    <div id="buscador">
                        <input id="address" type="textbox" size="20" value="Mendoza"><input type="button" value="Buscar" onclick="javascript:codeAddress()">
                        <br>
Ej: "Madrid 325, Godoy Cruz"
                    </div>
                </div>
            </div>
        </div>
        <div id="fade" class="overlay"></div>
        <div id="light" class="modal ui-widget-content">
            
            <div class="close" > <a href="javascript:cerrarVentanaModal()" >Ver en el Mapa</a></div>
           
            <div class="header" ><a>Bienvenido a Mendoza</a></div>
            
            <ul class="tabs-modal">
                <li id="izquierda"><a onclick="javascript:cambiarTab(1)"><span id="izquierdaA">¿Donde quieres ir?</span></a></li>
                <li id="medio1"><a onclick="javascript:cambiarTab(2)"><span id="medio1A" >¿Qué quieres hacer?</span></a></li>
                <li id="medio2"><a onclick="javascript:cambiarTab(3)"><span id="medio2A" >¿Dónde quieres alojarte?</span></a></li>
                <li id="medio3"><a onclick="javascript:cambiarTab(4)"><span id="medio3A" >Caminos del vino</span></a></li>
                <li id="derecha"><a onclick="javascript:cambiarTab(5)"><span id="derechaA" >Atractivos Turiscos</span></a></li>
            </ul>
            
            <div class="tab_container">
                <div id="tab1" class="tab_content">
                    <div class="nombreZonas"><span id="nombreZona"></span></div>
                        <ul class="zonas">
                            <li class="opcion_off">
                                <img src="img/CiudadMendoza.jpg">
                                <p>Mendoza Capital</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/GranMendoza.jpg">
                                <p>Zona Gran Mendoza</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/ZonaEste.jpg">
                                <p>Zona Este</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/ValledeUco.jpg">
                                <p>Zona Valle de Uco</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/ZonaSur.jpg">
                                <p>Zona Sur</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/ZonaNorte.jpg">
                                <p>Zona Norte</p>
                            </li>
                    </ul>
                    <!--/div-->
                </div>
                <div id="tab2" class="tab_content">
                    <div class="nombreActividades"><span id="nombreActividad"></span></div>
                    <ul class="actividades">
                        <li class="opcion_off">
                                <img src="img/museos.png">
                                <p id="name">Museos</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/teatros.png">
                                <p id="name">Teatros</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/norte.png">
                                <p id="name">Ferias y Congresos</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/ocio.png">
                                <p id="name">Ocio</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/norte.png">
                                <p id="name">Diversión</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/norte.png">
                                <p id="name">Centros Comerciales</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/ofiturismo.png">
                                <p id="name">Oficinas de Turismo</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/monumentos.png">
                                <p id="name">Monumentos</p>
                            </li>
                    </ul>
                </div>
                <div id="tab3" class="tab_content">
                    <div class="nombreActividades2"><span id="nombreActividad2"></span></div>
                    <ul class="actividades">
                            <li class="opcion_off">
                                <img src="img/hoteles.png">
                                <p>Hoteles</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/hostales.png">
                                <p>Hostales</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>ApartHoteles</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>PetitHotel</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>Motel</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>Hosteria o Posada</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>Cabañas</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>Camping</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>Refugio</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>Hospedaje</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>Hospedaje Rural</p>
                            </li>
                            <li class="opcion_off">
                                <img src="img/apartamentos.gif">
                                <p>Bed & Breakfast</p>
                            </li>
                            
                    </ul>
                </div>
                <div id="tab4" class="tab_content">
                    <div class="nombreActividades3"><span id="nombreActividad3"></span></div>
                    maturano
                    <!--Content-->
                </div>
                <div id="tab5" class="tab_content">
                    <div class="nombreActividades4"><span id="nombreActividad4"></span></div>
                    <!--div class="divSelect">
                        <select class="selectDeptos" onchange="changeDepto();">
                            <option>--Todos--</option>
                            <option>Capital</option>
                            <option>General Albear</option>
                            <option>Godoy Cruz</option>
                            <option>Guaymallén</option>
                            <option>Junín</option>
                            <option>La Paz</option>
                            <option>Las Heras</option>
                            <option>Lavalle</option>
                            <option>Luján de Cuyo</option>
                            <option>Maipú</option>
                            <option>Malargüe</option>
                            <option>Rivadavia</option>
                            <option>San Carlos</option>
                            <option>San Martín</option>
                            <option>San Rafael</option>
                            <option>Santa Rosa</option>
                            <option>Tunuyán</option>
                            <option>Tupungato</option>
                        </select>
                    </div--> 
                    <ul class="actividades">
                        <li class="opcion_off">
                            <img src="img/naturaleza.jpg">
                            <p>Turismo Natural</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/NieveInvierno.jpg">
                            <p>Nieve-Invierno</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/TurismoAventura.jpg">
                            <p>Turismo Aventura</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/TurismoCultural.jpg">
                            <p>Turismo Cultural</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/TurismoCientifico.jpg">
                            <p>Turismo Científico</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/RutaGastronomica.jpg">
                            <p>Rutas Gastronómicas</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/apartamentos.gif">
                            <p>Circuitos Turísticos</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/pesca.jpg">
                            <p>Pesca</p>
                        </li>
                        <!--li class="opcion_off">
                            <img src="img/apartamentos.gif">
                            <p>Refugio</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/apartamentos.gif">
                            <p>Hospedaje</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/apartamentos.gif">
                            <p>Hospedaje Rural</p>
                        </li>
                        <li class="opcion_off">
                            <img src="img/apartamentos.gif">
                            <p>Bed & Breakfast</p>
                        </li-->
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>		